<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import {h, ref} from "vue";
import CdlDescriptions from "@/components/descriptions";
import {DescriptionsTree} from "@/interfaces/components/Descriptions";
import {Authentication, Driver} from "@/interfaces/views/vehicle/driver";
import {useGetDriverInfoApi, useRemoveDriverApi, useResetPasswordApi} from "@/api/vehicle/driver";
import {ElMessage} from "element-plus/es";
import {ElMessageBox} from "element-plus";
import CdlImage from "@/components/Image";
import constant from "@/utils/constant";

const router = useRouter()
const route = useRoute()
if(route.query.id) initData()

const basicDescriptionsTree: DescriptionsTree<Driver> = [
  {label: "司机姓名", prop: "name"},
  {label: "司机手机号", prop: "mobile"},
  {label: "状态", prop: "status", dict: "driver_status"},
  {label: "创建人/创建时间"},
  {label: "更新人/更新时间"},
  {label: "备注信息", prop: "remark"},
]
const authDescriptionsTree: DescriptionsTree<Authentication> = [
  {label: "紧急联系人", prop: "emergencyContact"},
  {label: "身份证号码", prop: "idNum"},
  {label: "紧急联系人手机号", prop: "emergencyContactPhone"},
  {label: "驾驶证发证机关", prop: "drivingLicenseIssuingAuthority"},
  {label: "驾驶证有效期"},
  {label: "驾驶证号", prop: "drivingLicenseNum"},
  {label: "从业资格证编号", prop: "qualificationCertificateNum"},
  {label: "居住地址", prop: "address"},
  {label: "银行卡号", prop: "creditCardNum"},
  {label: "身份证正面", prop: "idCardObvImg", slot: (id) =>{
      return h(CdlImage, {
        previewSrcList: [constant.downloadUrl + id],
        src: constant.downloadUrl + id,
      })
    }},
  {label: "身份证背面", prop: "idCardRevImg", slot: (id) =>{
      return h(CdlImage, {
        previewSrcList: [constant.downloadUrl + id],
        src: constant.downloadUrl + id,
      })
    }},
  {label: "驾驶证", prop: "drivingLicenseImg", slot: (id) =>{
      return h(CdlImage, {
        previewSrcList: [constant.downloadUrl + id],
        src: constant.downloadUrl + id,
      })
    }},
  {label: "道路运输从业资格证", prop: "transportPermitImg", slot: (id) =>{
      return h(CdlImage, {
        previewSrcList: [constant.downloadUrl + id],
        src: constant.downloadUrl + id,
      })
    }},
  {label: "手持证件照", prop: "peopleLicenseImg", slot: (id) =>{
      return h(CdlImage, {
        previewSrcList: [constant.downloadUrl + id],
        src: constant.downloadUrl + id,
      })
    }},
]

const basicData = ref({})
const authData = ref({})

/**
 * 初始化数据
 */
function initData(){
  useGetDriverInfoApi(route.query.id as string).then(res => {
    const {id, name, mobile, password, status, fleetId, remark, ...rest} = res.data
    basicData.value = {
      id: id,
      name: name,
      mobile: mobile,
      password: password,
      status: status,
      fleetId: fleetId,
      remark: remark
    }
    authData.value = rest
  })
}

/**
 * 跳转编辑页面
 */
function jumpDriverUpdate(){
  router.push({
    path: "/vehicleManage/driver/driverList/createAndModifyDriver",
    query: {
      id: route.query.id
    }
  })
}

/**
 * 重置密码
 */
function resetPassword(){
  ElMessageBox.confirm(
    '此操作将该司机账号密码重置为手机号后4位，确认是否继续?',
    '警告',
    {
      confirmButtonText: '继续',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    useResetPasswordApi(route.query.id as string).then(()=> {
      ElMessage.success("重置密码成功！")
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消',
    })
  })
}
function removeDriver(){
  ElMessageBox.confirm(
      '在删除前需解除一切与该司机相关联的数据，否则会导致删除失败!此操作将永久移除该数据，请确认是否继续?',
      '警告',
      {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    useRemoveDriverApi(route.query.id as string).then(()=>{
      ElMessage.success("删除成功！自动跳转上一页")
      fallbackPage()
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消',
    })
  })
}
/**
 * 回退页面
 */
function fallbackPage(){
  router.back()
}
</script>

<template>
  <el-card style="position: relative">
    <button class="back_btn" @click="fallbackPage"></button>
    <div class="main_control">
      <el-button type="success" @click="jumpDriverUpdate" v-auth="'vehicle:driver:update'">编辑</el-button>
      <el-button type="danger" @click="resetPassword" v-auth="'vehicle:driver:update'">重置密码</el-button>
      <el-button type="danger" @click="removeDriver" v-auth="'vehicle:driver:delete'">删除</el-button>
    </div>
    <h1 class="top_line">基础信息</h1>
    <el-divider></el-divider>
    <CdlDescriptions :model="basicData" :template-tree="basicDescriptionsTree"></CdlDescriptions>
    <div v-if="basicData.status === 2">
      <h1>认证信息</h1>
      <el-divider></el-divider>
      <CdlDescriptions :model="authData" :template-tree="authDescriptionsTree"></CdlDescriptions>
    </div>
    <h1>信用评分</h1>
    <el-divider></el-divider>
    <h2>综合评分： 10</h2>
  </el-card>
</template>
